<script setup>
import categoryApi from '@/api/product/category.js'
import {ref, reactive} from 'vue'

//保存返回树形结构数据，但是本质上List<CategoryVO> list;
const list = ref([])

const loadData = () => {
  categoryApi.selectCategoryTree().then(result => {
    list.value = result.data
  })
}
//加载数据
loadData()



</script>

<template>
  <el-table
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
  >
    <el-table-column prop="name" label="分类名称"/>
    <el-table-column prop="image" label="图标" #default="scope">
      <img :src="scope.row.image" width="50"/>
    </el-table-column>
    <el-table-column prop="orderNum" label="排序"/>
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column label="操作" align="center" fixed="right" #default="scope">
      <el-button type="success" @click="showAddDialog(scope.row)">添加</el-button>
      <el-button type="primary" @click="showUpdateDialog(scope.row.id)">修改</el-button>
      <el-button type="danger" @click="DeleteById(scope.row.id)" :disabled="scope.row.children?.length > 0">删除</el-button>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>
